<!--
 * @Author: zjf
 * @Date: 2023-12-01 11:35:06
 * @LastEditors: zjf
 * @LastEditTime: 2023-12-07 18:55:39
 * @Description: 年份范围选择
-->
<template>
  <div class="year-range-picker">
    <el-date-picker v-model="startDate" :disabled="disabled" type="year" :placeholder="disabled?'':'选择开始年'" :size="size"
      class="year-picker" format="yyyy" :value-format="valueFormat" :picker-options="startDatePicker">
    </el-date-picker>
    <span class="range-word"> 至 </span>
    <el-date-picker v-model="endDate" :disabled="disabled" type="year" :placeholder="disabled?'':'选择结束年'" :size="size"
      class="year-picker" :value-format="valueFormat" :picker-options="endDatePicker">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: "l-year-range",
  props: {
    value: String,
    startValue: Number,
    endValue: Number,
    size: {
      type: String, default: 'mini'
    },
    valueFormat: {
      type: String, default: 'yyyy'
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {

      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),

    };
  },
  computed: {
    startDate: {
      get() { // 回调函数
        if (this.value) {
          const originValue = this.value.split(' - ')
          return originValue[0] || ""
        }
        if (this.startValue) {
          return String(this.startValue)
        }
        return ""
      },
      set(val) { // 监视当前属性值的变化
        const res = `${val} - ${this.endDate}`
        this.$emit('change', res)
        this.$emit('input', res)
        this.$emit('update:startValue', Number(val))
      }
    },
    endDate: {
      get() { // 回调函数
        if (this.value) {
          const originValue = this.value.split(' - ')
          return originValue[1] || ""
        }
        if (this.endValue) {
          return String(this.endValue)
        }
        return ""
      },
      set(val) { // 监视当前属性值的变化
        const res = `${this.startDate} - ${val}`
        this.$emit('change', res)
        this.$emit('input', res)
        this.$emit('update:endValue', Number(val))
      }
    },
  },
  watch: {

  },
  mounted() {
  },
  methods: {
    beginDate() {
      const that = this
      return {
        disabledDate(time) {
          if (that.endDate !== '') {
            let fixedTime = new Date(time)
            return fixedTime.getFullYear() > that.endDate
          }
        }
      }
    },
    processDate() {
      const that = this
      return {
        disabledDate(time) {
          let fixedTime = new Date(time)
          return fixedTime.getFullYear() < that.startDate
        }
      }
    },

    handleChange() {
      this.$emit("myChange", `${this.startDate} - ${this.endDate}`)
    }
  },
};
</script>


<style scoped lang="scss">
.year-range-picker {
  color: black;
  text-align: center;
  // border: 1px solid #dcdfe6;
  border-radius: 4px;
  line-height: 25px;
  overflow: hidden;
  display: flex;
  // margin: 4px 0;

  .el-input__inner {
    border: 0;
    line-height: 28px;
    height: 28px;
    margin: 0;
  }

  .year-picker {
    max-width: 150px;
    margin: 0;
  }

  .range-word {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 12px;
  }
}
</style>